<template>
	<view class=" bg-grey padding-sm-sm">
		<view class="tui-flex tui-center" >
			<view class="tui-col-1 tui-center">
					<tui-icon name="search tui-flex" size="30" unit="rpx"></tui-icon>
			</view>
			<view class=" tui-flex tui-col-10" :class="showSearchModel?'tui-center':'tui-align-left'">
				<input @focus="toShowSearchFu" @input="toSearchFu"  class="search-input input-search-placeholder tui-col-11 tui-input  round_view bg-white  tui-center " placeholder="搜索" v-model="searchKey"
				 >
				</input>
			</view>
			<view v-if="showSearchModel" class=" text-center text-green text-30 tui-col-1 animation-slide-right" @click=" toUnShowSearchFu ">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:String||Number,
				default:''
			}
		},
		data() {
			return {
				showSearchModel:false,
				searchKey:''
			}
		},
		methods: {
			toSearchFu(e){
				debugger
				this.searchKey = e.detail.value
				this.$emit('inputChange', e.detail.value)
			},
			toShowSearchFu() {
				this.showSearchModel = true
			},
			toUnShowSearchFu() {
				this.showSearchModel = false
				this.searchKey = ''
				this.$emit('inputChange', '')
			},
		},
		watch:{
			value(value){
				this.searchKey = value
			}
		}
	}
</script>

<style scoped>
.search-input{
	padding: 2rpx;
}
</style>
